$(function () {
    initArtCateList();
    //1.生成分类列表
    function initArtCateList() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success(res) {
                // console.log(res);
                // res.data.length=7;
                $('tbody').html(template('tpl-table', res))
                $('.btn-delete').trigger('click')
            }
        })
    }

    let indexAdd = null//预先保存弹出层的索引，方便进行关闭

    // 2.为 添加分类按钮 绑定点击事件，显示弹出层----------------
    $('#btnAddCate').on('click', function () {
        indexAdd = layui.layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        })
    })

    // 3.为 添加分类表单 代理submit事件-------------------------
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault();//阻止表单默认提交行为
        $.ajax({
            method: 'POST',
            url: '/my/article/addcates',
            data: $(this).serialize(),
            success(res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layui.layer.msg(res.message)
                }
                initArtCateList();
                layui.layer.msg(res.message);
                // 根据索引，关闭对应的弹出层
                layui.layer.close(indexAdd)
            }

        })
    })

    // 4.为所有删除按钮代理click点击事件-------------------------
    $('tbody').on('click', '.btn-delete', function () {
        // layer.confirm('确定删除么？', { icon: 3, title: '提示' }, index => {
            // 获取按钮所在单元格的分类id
            let delId = this.parentNode.dataset.id//获取data-id属性的值
            // 发送请求 删除当前id
            $.ajax({
                method: 'GET',
                url: '/my/article/deletecate/' + delId,
                success(res) {
                    layui.layer.msg(res.message)
                    if (res.status !== 0) {
                        return
                    }
                    
                    initArtCateList();
                }
            })
        // })
    })

    // 5.为所有 编辑按钮 代理click事件---------------------------
    let indexEdit = null
    $('tbody').on('click', '.btn-edit', function () {
        // a.显示 编辑弹出层
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#dialog-edit').html()
        });

        // b.获取被点击分类的名称和别名 ，渲染到文本框中
        // b0.从按钮所在的单元格上获取分类id，并设置给编辑层中分类id隐藏域
        let cateId = $(this).parent('td').attr('data-id');
        $('#form-edit input[name=Id]').val(cateId);

        // b1.获取按钮所在的 行 的jq对象
        let $tr = $(this).parents('tr');
        // b2.获取 行 第一个单元格 的内容，并设置给 编辑层中 分类名称文本框
        let strName = $tr.children(':first').text();
        $('#form-edit input[name=name]').val(strName);
        // b3.获取 行 第一个单元格 的内容，并设置给 编辑层中 分类别名文本框
        let strAlias = $tr.children(':eq(1)').text();
        $('#form-edit input[name=alias]').val(strAlias);

        // 在展示弹出层之后，根据 id 的值发起请求获取文章分类的数据，并填充到表单中
        // let id = this.parentNode.dataset.id;
        // $.ajax({
        //     method: 'GET',
        //     url: '/my/article/cates/' + id,
        //     success(res) {
        //         // console.log(res);
        //         layui.form.val('form-edit', res.data)
        //     }
        // })
    })


    // 6.为确认修改按钮代理 click事件 更新文章分类的数据----------
    $('body').on('click', '#btn-Edit', function (e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/my/article/updatecate',
            data: $('#form-edit').serialize(),
            success(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message)
                }
                layui.layer.msg(res.message)
                initArtCateList()
                layui.layer.close(indexEdit)

            }
        })
    })


})